<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	<style type="text/css">
		html,body{
			width: 100%;
			height: 100%;
		}
		span{
			font-size: 20px;;
		}
	</style>
	<link rel="stylesheet" type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css"/>
	</head>
	<body>
		<div style="height: 80%;width: 80%;" class="container panel panel-default">
			<div style="width: 102%;background-color: #1B6D85;height: 50px;" class="row">
				<div class="col-md-10">
					<span style="color: white;font-size: 30px;">宿舍管理系统</span>
				</div>
				<div  class="col-md-2">
					<label><span style="color: white;">用户名：</span></label>
					<span class="user_name" style="color:red;font-size: 20px;">XXX</span>
				</div>
			</div>
			<br><br><br><br>
			<div id="" class="row">
				<div id="" class="col-md-4">
					<div style="width: 200px;text-align: center;" class="list-group">
					  <a style="background-color: #00007f;color: white;" href="#" class="list-group-item disabled">
					    首页
					  </a>
					  <a href="#" style="font-size:20px;" class="list-group-item" onclick="look_stu()">学生查看</a>
					  <a href="#" style="font-size:20px;" class="list-group-item" onclick="qu_code()">缺勤记录</a>
					  <a href="#" style="font-size:20px;" class="list-group-item" onclick="psd()">修改密码</a>
					  <a href="#" style="font-size:20px;" class="list-group-item" onclick="exit()">退出系统</a>
					</div>
				</div>
				<div id="" class="col-md-6">
					<h1>欢迎您 宿舍管理员</h1>
					<div class="box" id="box">
						<!-- 按钮 -->
						<div  hidden id="btn">
							<button style="width: 15%;height: 5%;font-size: 20px;" class="btn btn-success" type="button" data-toggle="modal" data-target="#myModal" onclick="btn_add()" id="btn_modclick">添加</button>
							<input  style="width: 15%;height: 5%;font-size: 20px;" hidden class="btn btn-warning" type="button" name="row_del" id="" value="批量删除" />
							<div style="display: inline-block;" class="dropdown" >
							  <button style="width: 80px;height:20%" class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" id="down_bt">
							    名字	
							    <span class="caret"></span>
							  </button>
							  <ul class="dropdown-menu" aria-labelledby="dropdownMenu4" id="ul" class="down">
								  
							  </ul>
							  </div>
							  <input style="height: 30px;" type="" name="" id="" value="" />
							  <button style="width: 15%;height: 5%;font-size: 20px" type="button">搜索</button>
						</div>
						<br>
						<!-- 表格 -->
						<table style="width: 100%;font-size:20px" cellspacing="" cellpadding="" hidden class="table table-striped table-bordered table-hover" id="mytable1">
							<thead>
								<th><input type="checkbox" name="checkAll1" /></th>
								<th>编号</th>
								<th>姓名</th>
								<th>性别</th>
								<th>电话</th>
								<th>宿舍楼</th>
								<th>房间号</th>
								<th>操作</th>
							</thead>
							<tbody>
							</tbody>
						</table>
						<!-- 2 -->
						<table style="width: 100%;font-size:20px" cellspacing="" cellpadding="" hidden class="table table-striped table-bordered table-hover" id="mytable2">
							<thead>
								<th><input type="checkbox" name="checkAll1" /></th>
								<th>日期</th>
								<th>编号</th>
								<th>姓名</th>
								<th>宿舍楼</th>
								<th>房间号</th>
								<th>备注</th>
								<th>操作</th>
							</thead>
							<tbody>
							</tbody>
						</table>
						<!-- 修改密码 -->
						<form style="text-align: right;margin-right: 40%;margin-top: 10%;" action="" method="" hidden id="edit_psd">
							<label style="font-size:20px;"><span style="color: red;">*</span>原密码</label>
							<input type="password" name="old_psd" id="" value="" />
							<br><br><br>
							<label style="font-size:20px;"><span style="color: red;">*</span>新密码</label>
							<input type="password" name="new_psd" id="" value="" />
							<br><br><br>
							<label style="font-size:20px;"><span style="color: red;">*</span>确认密码</label>
							<input  type="password" name="c_psd" id="" value="" />
							<br><br><br>
							<input style="margin-right: 22%;width:15;height:5%" class="btn btn-success" type="button" name="psd_save" id="" value="提交" />
						</form>
					</div>
					
				    </div>
				</div>
			</div>
			<!-- 模态框1 -->
			<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
								&times;
							</button>
							<h4 id="add_sy" class="modal-title" id="myModalLabel">
								添加学生
							</h4>
						</div>
						<div style="text-align: right;margin-right: 28%;" class="modal-body" id="md1">
							<label>姓名</label>
							<input type="" name="modal_name" id="" value="" />
							<br>
							<label id="lab_sex">性别</label>
								<select style="margin-right:35%" name="sex1">
									<option id="select1">男</option>
									<option id="select2">女</option>
								</select>
							<br>	
							<label>电话</label>
							<input type="" name="modal_phone" id="" value="" />
							<br>
							<label>宿舍楼</label>
							<input type="" name="modal_lou" id="" value="" />
							<br>
							<label>房间号</label>
							<input type="" name="modal_room" id="" value="" />
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<button type="button" class="queren" class="btn btn-default" data-dismiss="modal" name="modal_save" id="modal_save">保存</button>
							<button type="button" hidden class="btn btn-default" data-dismiss="modal"name="modal_cr" id="modal_co">确认</button>
							<!-- <input type="button" class="btn btn-primary" data-dismiss="modal" value="保存" name="modal_save" id="modal_save"></input>
							<input style="display:none" type="button" class="btn btn-primary" data-dismiss="modal" value="确认" name="modal_cr" id="modal_save" ></input> -->
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal -->
			</div>
			<!-- 模态框2 -->
			<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
				<div class="modal-dialog">
					<div class="modal-content">
						<div class="modal-header">
							<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
								&times;
							</button>
						</div>
						<div style="text-align: right;margin-right: 28%;" class="modal-body">
							<label>日期</label>
							<input type="date" name="modal_sdate" id="" value="" />
							<br>
							<label>编号</label>
							<input type="text" name="modal_sno" id="" value="" />
							<br>
							<label>姓名</label>
							<input type="" name="modal_sname" id="" value="" />
							<br>
							<label>宿舍楼</label>
							<input type="" name="modal_slou" id="" value="" />
							<br>
							<label>房间号</label>
							<input type="" name="modal_sroom" id="" value="" />
							<br>
							<label>备注</label>
							<input type="" name="modal_bz" id="" value="" />
							<br>
						</div>
						<div class="modal-footer">
							<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
							<button type="button" class="queren" class="btn btn-default" data-dismiss="modal" hidden name="modal_save" id="modal_save2">保存</button>
							<button type="button" hidden class="btn btn-default" data-dismiss="modal"name="modal_cr" id="modal_co2">确认</button>
						</div>
					</div><!-- /.modal-content -->
				</div><!-- /.modal -->
			</div>
		</div>
		<script src="../js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="./bootstrap-3.3.7-dist/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			let a,b,c,d,key,key2;
			let $tbody = $("#mytable1").find("tbody");
			let $tbody2 = $("#mytable2").find("tbody");
			let sign_stu = JSON.parse(localStorage.getItem("sign_stu"));
			let stu_code=JSON.parse(localStorage.getItem("arr_node"));
			let item = JSON.parse(localStorage.getItem("item"));
			let lou = item.lou;
			console.log(sign_stu);
			//当前登入用户
			let user_name = JSON.parse(localStorage.getItem("stu_name"));
			let user_psd = user_name.psd;
			//拿到所有宿管员的账号密码数据
			let manager_data = JSON.parse(localStorage.getItem("manager"))
			console.log(manager_data);
			for(let index in manager_data){
				let item = manager_data[index];
				if(item.user === user_name.user&&item.psd === user_name.psd){
					console.log(index);
					let b = index;
					break;
				}
				continue;
			}
			$(".user_name").text(user_name.user);
			console.log(user_name);
			//退出系统
			function exit(){
				window.location.href="login.html";
			}
			let new_stu = "";
			let new_node = "";
			//修改保存
			$("button[name='modal_save']").click(function(){
				let modal_sdate = $("input[name='modal_sdate']").val();
				let modal_sno = $("input[name='modal_sno']").val();
				let modal_sname = $("input[name='modal_sname']").val();
				let modal_slou = $("input[name='modal_slou']").val();
				let modal_sroom = $("input[name='modal_sroom']").val();
				let modal_bz = $("input[name='modal_bz']").val();
				if(key2 !== ""){
					console.log(key2)
					new_stu =
					{
						id:key2+1,
						name:$("input[name='modal_name']").val(),
						sex:$("select[name='sex1']").val(),
						phone:$("input[name='modal_phone']").val(),
						lou:$("input[name='modal_lou']").val(),
						room:$("input[name='modal_room']").val()
					}
					sign_stu.splice(key2,1,new_stu);
					console.log(sign_stu);
					localStorage.setItem("sign_stu",JSON.stringify(sign_stu));
					$tbody.empty();
					name ="look";
					update(name);
					key2 = "";
					return key2;
				}else if(key2_2 !== ""){
					console.log("key2_2")
					new_node =
					{
						date:modal_sdate,
						id:parseInt(modal_sno),
						name:modal_sname,
						lou:modal_slou,
						room:modal_sroom,
						beizhu:modal_bz
					}
					console.log("key2_2");
					stu_code.splice(key2_2,1,new_node)
					console.log(stu_code);
					localStorage.setItem("arr_node",JSON.stringify(stu_code));
					$tbody2.empty();
					name ="code";
					update(name);
					key2_2 = "";
					return key2_2;
				}
			})
			//添加缺勤记录
			function su_add(index){
				console.log(sign_stu[index]);
				let item = sign_stu[index];
				$("input[name='modal_sdate']").val("");
				$("input[name='modal_sno']").val(item.id);
				$("input[name='modal_sname']").val(item.name);
				$("input[name='modal_slou']").val(item.lou);
				$("input[name='modal_sroom']").val(item.room);
				$("input[name='modal_bz']").val("");
				// let que_add=
				// {
				// 	date:modal_sdate2,
				// 	id:modal_sno2,
				// 	name:modal_sname2,
				// 	lou:modal_slou2,
				// 	room:modal_sroom2,
				// 	beizhu:modal_bz2,
				// }
				// console.log(que_add)
			}
			//修改1
			function su_edit(index){
				key2 = index;
				$("#modal_co").hide();
				$("#modal_save").show();
				let item = sign_stu[index];
				console.log(item.name,item.sex)
				$("input[name='modal_name']").val(item.name);
				$("input[name='sex1']").val(item.sex);
				$("input[name='modal_phone']").val(item.phone);
				$("input[name='modal_lou']").val(item.lou);
				$("input[name='modal_room']").val(item.room);
				return key2;
			}
			//修改2
			function code_eidt(index){
				key2_2 = index;
				$("#modal_save2").show();
				$("#modal_co2").hide();
				let item = stu_code[index];
				$("input[name='modal_sdate']").val(item.date);
				$("input[name='modal_sno']").val(item.id);
				$("input[name='modal_sname']").val(item.name);
				$("input[name='modal_slou']").val(item.lou);
				$("input[name='modal_sroom']").val(item.room);
				$("input[name='modal_bz']").val(item.beizhu);
				return key2_2;
			}
			//删除
			function su_stu(index){
				if(confirm("确定要删除吗？")){
					sign_stu.splice(index,1);
					localStorage.setItem("sign_stu",JSON.stringify(sign_stu));
					$tbody.empty();
					let name ="look";
					update(name);
				}
			}
			function code(index){
				if(confirm("确定要删除吗？")){
					stu_code.splice(index,1);
					localStorage.setItem("arr_node",JSON.stringify(stu_code));
					$tbody2.empty();
					let name ="code";
					update(name);
				}
			}
			//添加按钮
			function btn_add(){
				$("#myModal").find("input").val("");
				$("#myModal2").find("input").val("");
				$("#modal_co").show();
				$("#modal_save").hide();
				if(key === 1){
					$("#btn_modclick").attr("data-target","#myModal");
				}else if(key === 2){
					$("#btn_modclick").attr("data-target","#myModal2");
				}
			}
			//添加模态框保存modal_sname
			$("button[name='modal_cr']").click(function(){
				console.log(key);
				let sex1 = $("select[name='sex1']").val();
				let modal_name = $("input[name='modal_name']").val();
				let modal_phone = $("input[name='modal_phone']").val();
				let modal_lou = $("input[name='modal_lou']").val();
				let modal_room = $("input[name='modal_room']").val();
				// 2
				let modal_sdate = $("input[name='modal_sdate']").val();
				let modal_sno = $("input[name='modal_sno']").val();
				let modal_sname = $("input[name='modal_sname']").val();
				let modal_slou = $("input[name='modal_slou']").val();
				let modal_sroom = $("input[name='modal_sroom']").val();
				let modal_bz = $("input[name='modal_bz']").val();
				
				let new_stu =
				{
					id:sign_stu.length+1,
					name:modal_name,
					sex:sex1,
					phone:modal_phone,
					lou:modal_lou,
					room:modal_room
				}
				sign_stu.push(new_stu);
				localStorage.setItem("sign_stu",JSON.stringify(sign_stu));
				$tbody.empty();
				let name ="look";
				update(name);
				
				let new_node =
				{
					date:modal_sdate,
					id:parseInt(modal_sno),
					name:modal_sname,
					lou:modal_slou,
					room:modal_sroom,
					beizhu:modal_bz
				}
				stu_code.push(new_node);
				console.log(stu_code)
				localStorage.setItem("arr_node",JSON.stringify(stu_code));
				$tbody2.empty();
				name ="code";
				update(name);
			})
			//全选
			$("input[name='checkAll1']").click(function(){
				let che = $(this);
				$("input[name='check']").prop("checked",che.prop("checked"));
			})
			//批量删除
			$("input[name='row_del']").click(function(){
				if(confirm("确定要删除吗？")){
					$("input[name='check']:checked").parent().parent().remove();
				}
					
			})
			//改密码
			function psd(){
				$("#btn").hide();
				$("h1").slideUp();
				$("#mytable1").hide();
				$("#mytable2").hide();
				$("#edit_psd").show();
			}
			//改密码
			$("input[name='psd_save']").click(function(){
				let old_psd = $("input[name='old_psd']").val();
				let new_psd = $("input[name='new_psd']").val();
				let c_psd = $("input[name='c_psd']").val();
				let new_manager =
				{
					user:user_name.user,
					psd:c_psd,
				}
				console.log(old_psd,new_psd,c_psd,user_psd);
				if(old_psd !== user_psd){
					alert("密码不正确");
					return false;
				}else if(new_psd === user_psd){
					alert("新密码不能和原密码相同");
					return false;
				}else if (c_psd !== new_psd){
					alert("两次输入的密码不正确");
					return false;
				}
				manager_data.splice(b,1,new_manager);
				console.log(manager_data);
				// localStorage.setItem("sign_manager",JSON.stringify(manager_data));
				alert("修改成功，请重新登入");
				window.location.href="login.html";
			})
			//缺勤记录
			function qu_code(){
				key = 2;
				if(b === 1){
					$("h1").slideUp();
					$("#mytable1").hide();
					$("#edit_psd").hide();
					$("#mytable2").show();
					$("#btn").show();
				}else{
					let name = "code";
					update(name);
					$("h1").slideUp();
					$("#mytable1").hide();
					$("#mytable2").show();
					$("#btn").show();
					$("#edit_psd").hide();
				}
				return b = 1;
			}
			//学生查看
			function look_stu(){
				key = 1;
				if(a === 1){
					$("h1").slideUp();
					$("#mytable2").hide();
					$("#mytable1").show();
					$("#btn").show();
					$("#edit_psd").hide();
				}else{
					let name = "look";
					update(name);
					$("h1").slideUp();
					$("#mytable1").show();
					$("#btn").show();
					$("#edit_psd").hide();
				}
				return a = 1;
			}
			//表格数据
			function update(name){
				let sign_stu = JSON.parse(localStorage.getItem("sign_stu"))
				//获取管理员数据
				if(name === "look"){
					for(index in sign_stu){
						let item = sign_stu[index]
						if(item.lou === lou){
							let tr =
							`
							<tr>
							<td><input type="checkbox" name="check" /></td>
							<td>${item.id}</td>
							<td>${item.name}</td>
							<td>${item.sex}</td>
							<td>${item.phone}</td>
							<td>${item.lou}</td>
							<td>${item.room}</td>
							<td>
							<button class="btn btn-info" onclick="su_edit(${index})" class="btn btn-success" " data-toggle="modal" data-target="#myModal">修改</button>
							<button class="btn btn-danger" onclick="su_stu(${index})">删除</button>
							<button style="width:35%" class="btn btn-success" onclick="su_add(${index})" data-toggle="modal" data-target="#myModal2">加记录</button>
							</td>
							</tr>
							`;
							$tbody.append(tr);
						}
							
					}
				}else if(name === "code"){
					let newstu_code = JSON.parse(localStorage.getItem("arr_node"))
					if(newstu_code){
						stu_code = newstu_code;
					}else{
						stu_code =  stu_code;
					}
					console.log(stu_code)
						for(index in stu_code){
							let item = stu_code[index]
							if(item.lou === lou){
								let tr =
								`
								<tr>
								<td><input type="checkbox" name="check" /></td>
								<td>${item.date}</td>
								<td>${item.id}</td>
								<td>${item.name}</td>
								<td>${item.lou}</td>
								<td>${item.room}</td>
								<td>${item.beizhu}</td>
								<td>
								<button class="btn btn-info" onclick="code_eidt(${index})" class="btn btn-success" " data-toggle="modal" data-target="#myModal2">修改</button>
								<button class="btn btn-danger" onclick="code(${index})">删除</button>
								</td>
								</tr>
								`;
								$tbody2.append(tr);
							}
							
						}
						localStorage.setItem("arr_node",JSON.stringify(stu_code));
					}
			}
			update();
		</script>
	</body>
</html>
